// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk
import Fk.Common
import Fk.Pages
import Fk.RoomElement

GraphicsBox {
  id: root

  property var selectedItem: []
  property var ok_options: []
  property var cards: []
  property int min
  property int max

  title.text: Util.processPrompt("$DraftBanGenerals:::" + String(max))
  // TODO: Adjust the UI design in case there are more than 7 cards
  width: 40 + Math.min(9, Math.max(4, cards.length)) * 100
  height: 360

  Component {
    id: cardDelegate
    Avatar {
      general: modelData
      property bool selected: false
      signal clicked()
      signal rightClicked()

      Image {
        source: AppPath + "/image/button/skill/locked.png"
        anchors.centerIn: parent
        opacity: selected? 1 : 0
      }

      Text {
        property string name: luatr(modelData)
        text: name
        font.pixelSize: 22 - name.length*2
        font.family: fontLibian.name
        color: "white"
        style: Text.Outline
        styleColor: "black"
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        anchors.rightMargin: 2
        elide: Text.ElideRight
      }

      onClicked: {
        if (ok_options.length == 0) return;

        if (!selected) {
          root.selectedItem.push(modelData);
          selected = true;
        } else {
          root.selectedItem.splice(root.selectedItem.indexOf(modelData), 1);
          selected = false;
        }
        root.updateCardSelectable();
      }

      onRightClicked: {
        roomScene.startCheat("GeneralDetail", { generals: [modelData] });
      }
      
      TapHandler {
        acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.NoButton
        gesturePolicy: TapHandler.WithinBounds

        onTapped: (p, btn) => {
          if (btn === Qt.LeftButton || btn === Qt.NoButton) {
            parent.clicked();
          } else if (btn === Qt.RightButton) {
            parent.rightClicked();
          }
        }

        onLongPressed: {
          parent.rightClicked();
        }
      }
    }
  }

  Flickable {
    id: flickableContainer
    ScrollBar.vertical: ScrollBar {}

    flickableDirection: Flickable.VerticalFlick
    anchors.fill: parent
    anchors.topMargin: 60
    anchors.leftMargin: 20
    anchors.rightMargin: 20
    anchors.bottomMargin: 60

    contentWidth: cardsList.width
    contentHeight: cardsList.height
    clip: true

    ColumnLayout {
      id: cardsList
      anchors.top: parent.top

      Grid {
        columns: 13
        spacing: 5
        Repeater {
          id: to_select
          model: cards
          delegate: cardDelegate
        }
      }
    }
  }

  Item {
    id: buttonArea
    anchors.fill: parent
    anchors.bottomMargin: 10
    height: 40

    Row {
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.bottom: parent.bottom
      spacing: 8

      Repeater {
        id: ok_buttons
        model: ok_options

        MetroButton {
          Layout.fillWidth: true
          text: Util.processPrompt(modelData)
          enabled: true

          onClicked: {
            close();
            roomScene.state = "notactive";
            const reply = JSON.stringify(
              {
                cards: root.selectedItem,
                choice: modelData,
              }
            );
            ClientInstance.replyToServer("", reply);
          }
        }
      }
    }
  }

  function updateCardSelectable() {
    let item;
    for (let i = 0; i < ok_buttons.count; i++) {
      item = ok_buttons.itemAt(i);
      item.enabled = (selectedItem.length >= min && selectedItem.length <= max)
    }
  }

  function loadData(data) {
    const d = data;
    cards = d[0];
    ok_options = d[1];
    min = d[2] ?? 1
    max = d[3] ?? 1
  }
}

